<template>
  <template v-for="menu of menus" :key="menu.code">
    <el-sub-menu v-if="menu.children && menu.children.filter(i=>i.category != 3).length > 0 "  :index="menu.path"  >
      <template #title>
        <Icon v-if="menu.icon" :name="menu.icon" class="mr10" color="#fff"/>
        <!--        <i v-if="menu.icon" :class="menu.icon" class="mr10"></i>-->
        <span>{{ menu.name }}</span>
        <!-- {{lang=='zh'&& menu.enName ? menu.name : menu.enName}} -->
      </template>
      <MenuItems :menus="menu.children"></MenuItems>
    </el-sub-menu>
    <!-- <el-menu-item v-else :index="menu.code" > -->
    <!-- <SidebarItemLink v-else :to="resolvePath(menu.path||'')"> -->
    <el-menu-item v-else-if="menu.visible" :index="menu.path" :route="menu.path && { path: menu.path }" @click="test">
      <!--      <i v-if="menu.icon" :class="menu.icon" class="mr10"></i>-->
      <Icon v-if="menu.icon" :name="menu.icon" class="mr10" color="#fff"/>
      <span>{{ menu.name }}</span>
      <!-- {{lang=='zh'&& menu.enName ? menu.name : menu.enName}} -->
    </el-menu-item>
    <!-- </SidebarItemLink> -->

  </template>
</template>

<script setup lang="ts">
import {MenuItem} from '@/types/menu-item';
import SidebarItemLink from './SidebarItemLink.vue'
import {isExternal} from '@/utils/validate'
import {useRouter} from 'vue-router';
import {useStore} from "@/store";
// import MenuItems from './menu-items.vue';
import Icon from '@/components/icon/index.vue'
import {reactive, toRefs, watch} from "vue";
// import path from 'path'

const router = useRouter()
let store = useStore();
// defineProps<{
//   menus: Array<MenuItem>;
// }>();

const props = defineProps({
  menus: {
    type: Array<MenuItem>,
    default: []
  },
})

const state = reactive({
  lang: store.state?.user?.lang ? store.state.user.lang : 'zh'
});
const {
  lang,
} = toRefs(state);
const resolvePath = (routePath: string) => {
  console.log(routePath);
  return routePath
  // if (isExternal(routePath)) {
  //   return routePath
  // }
  // if (isExternal(props.basePath)) {
  //   return props.basePath
  // }
  // return path.resolve(props.basePath, routePath)
}

watch(()=>props.menus,(val)=>{
  console.log(val);

},{immediate:true,deep:true})

watch(store.state?.user, (newValue, oldValue) => {
  state.lang = newValue?.lang ? newValue.lang : 'zh';
});
const test = (res: any) => {
  console.log(res);
  router.push({path: res.index}).catch((err) => {
    console.log(err)
  })
}

</script>

<style scoped  lang="scss">

.el-menu--popup{
  .el-menu-item{
  height: 45px !important;
}
}

</style>
